<template>
	<view class="main-body">
		<view style="height: 220rpx;"></view>
		<view class="search-box">
			<view style="text-align: center;padding-top: 15rpx;color: #067AEA; border-bottom: 1px solid #f0f0f0;">会议预约
			</view>
			<view class="search-body">
				<view class="" @click="openRoomPicker" style="display: flex;margin-top: 10rpx;">

					<view style="width: 30% ;color: #067AEA;">会议类型:
					</view>
					<view style="width: 70% ;color: #067AEA;">{{selectedMeetingName}}
					</view>

					<uv-picker ref="roomPicker" :columns="roomList" keyName="label"
						@confirm="roomNameconfirm"></uv-picker>

				</view>

				<view style="display: flex; margin-top: 15rpx;">
					<view @click="openDatePicker" style="width: 30%; color: #067AEA;">选择日期:</view>
					<view style="width: 70%; color: #067AEA;" @click="openDatePicker">{{selectedDateStr}}</view>
					<view>
						<uv-datetime-picker ref="datePicker" v-model="selectedDate" mode="date"
							:min-date="defaultCurrentDate" @confirm="confirmSelectedDate">
						</uv-datetime-picker>
					</view>
					<!-- <view style="width: 10%;text-align: center;">|</view> -->
					<!-- 	<view v-if="selectedBeginTimeStr == ''" style="width: 25%;color: #067AEA;"
						@click="openBeginTimePicker">开始时间</view>
					<view v-if="selectedBeginTimeStr !== ''" style="width: 25%;color: #067AEA; font-size: 35rpx;"
						@click="openBeginTimePicker">{{selectedBeginTimeStr}}</view>
					<view style="width: 10%;color: #067AEA; text-align: center;">~</view>
					<view v-if="selectedEndTimeStr == ''" style="width: 25%;color: #067AEA; text-align: center;"
						@click="openEndTimePicker">结束时间</view> -->
					<view v-if="selectedEndTimeStr !== ''"
						style="width: 25%;color: #067AEA; font-size: 35rpx; text-align: center;"
						@click="openEndTimePicker">{{selectedEndTimeStr}}</view>
					<uv-datetime-picker ref="beginTimePicker" v-model="selectedDate" mode="time"
						@confirm="confirmSelectedBeginTime">
					</uv-datetime-picker>
					<uv-datetime-picker ref="endTimePicker" v-model="selectedDate" mode="time"
						@confirm="confirmSelectedEndTime">
					</uv-datetime-picker>
				</view>


				<view style="display: flex;margin-top: 15rpx;">
					<view style="color: #067AEA;width: 30%;">输入人数：</view>
					<input style="border-bottom: 1px solid #d8deea;" type="number" v-model="peopleNum" />
				</view>
				<view style="display: flex;margin-top: 20rpx;">
					<uv-button style="width: 65%;" :custom-style="searchButtonStyle" text="查询"
						@click="search"></uv-button>
					<view style="width: 5%;"></view>
					<uv-button style="width: 30%;" :custom-style="resetButtonStyle" text="重置"
						@click="resetButtonFun"></uv-button>
				</view>
			</view>
		</view>
		<view style="height: 40rpx;"></view>
		<view class="roomBox">
			<view>
				<view class="roomBody" v-for="item in roomListAll">
					<view style="position: absolute;top: 20rpx;right: 40rpx">
						<uv-button @click="goToReview(item.id)" style="width: 100rpx; height: 40rpx; font-size: 11rpx;"
							:custom-style="reviewButtonStyle">
							<text style="font-size: 20rpx;">预定</text>
						</uv-button>
					</view>

					<view style="display: flex;width: 90%;margin-left: 4%;">
						<view style="width: 30%; height: 170rpx;margin-top: 20rpx;">
							<image :src="item.imageBo[0].url" style="width: 100%;height: 100%;border-radius: 26rpx;">
							</image>
						</view>
						<view style="width: 5%;"></view>
						<view style="width: 65%; height: 170rpx;margin-top: 20rpx;">
							<view style="font-weight: 600;">{{item.title}}</view>
							<view style="display: flex;">
								<uv-icon name="account-fill" color='#2979ff'></uv-icon>
								<view style="width: 10rpx;">

								</view>
								<view style="font-size: 24rpx; color:#667685 ;">可容纳：{{item.seat}}人</view>
							</view>
							<view style="display: flex;">
								<uv-icon name="map" color='#2979ff'></uv-icon>
								<view style="width: 10rpx;">

								</view>
								<view style="font-size: 24rpx; color:#667685 ;">会议室地点：{{item.address}}</view>
							</view>
							<view style="display: flex;">
								<uv-icon name="kefu-ermai" color='#2979ff'></uv-icon>
								<view style="width: 10rpx;">
								</view>
								<view v-for="device in item.deviceList" style="font-size: 24rpx; color:#667685 ;">
									{{device.name}}/
								</view>
							</view>
							<!-- //时间条 -->

						</view>

					</view>
					<view class="time-line">
						<view class="time-line-str-item" v-for="(item,index) in timeStr">{{item}}</view>
					</view>
					<view class="time-line">
						<view v-for="(item,index) in item.timeArr" class="time-line-item"
							:class="{'isChecked' : item.status!= 0, 'first-item': index === 0, 'last-item': index === 15}">
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import api from '@/api/api.js';
	import util from '@/api/util.js'
	import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
	import moreSelect from '../../changeMoreSelect/components/more-select.vue'
	import moreSelecttwo from '../../changeMoreSelect/components/more-selecttwo.vue'

	export default {
		data() {
			return {
				timeStr: ['8', '9', '10', '11', '14', '15', '14', '17'],
				roomListAll: [],
				roomList: [
					[{
							label: '小会议室',
							value: '小会议室'
						},
						{
							label: '中会议室',
							value: '中会议室'
						},
						{
							label: '大会议室',
							value: '大会议室'
						},
					]
				],
				defaultCurrentDate: Number(new Date()),
				selectedDate: Number(new Date()),
				selectedDateStr: this.timestampToDateStr(Date.now()),
				selectedBeginTime: '',
				selectedBeginTimeStr: '',
				selectedEndTime: '',
				selectedEndTimeStr: '',
				selectedMeetingName: '',
				selectedMeetingId: '',
				peopleNum: '',
			}
		},
		created() {
			// this.queryRoomList();
			this.queryRoomListByName();
			this.isAdmin();
		},
		computed: {
			searchButtonStyle() {
				return {
					height: "70rpx",
					background: '#1A88F7',
					color: '#fff',
					borderRadius: '40rpx', //圆角
				}
			},
			resetButtonStyle() {
				return {
					height: "70rpx",
					background: '#FE976A',
					color: '#fff',
					borderRadius: '40rpx', //圆角
				}
			},
			reviewButtonStyle() {
				return {
					background: '#1A88F7',
					color: '#fff',
					borderRadius: '40rpx', //圆角
				}
			},
		},
		methods: {
			//根据权限加载底部路由；
			isAdmin() {
				uni.getStorage({
					key: 'roleId',
					success: (res) => {
						console.log('获取当前的roleId', res.data);
						if (res.data == 1) {
							uni.setTabBarItem({
								index: 2,
								visible: false
							});
						} else {
							uni.setTabBarItem({
								index: 1,
								visible: false
							});
						}
					}
				});
			},
			//查询按钮
			search() {
				this.queryRoomListByName();
			},
			//根据名字筛选会议室
			queryRoomListByName() {
				let params;
				if (this.peopleNum == '') {
					params = {
						currentDate: this.selectedDate,
						name: this.selectedMeetingName,
						seat: 0
					}
				} else {
					params = {
						currentDate: this.selectedDate,
						name: this.selectedMeetingName,
						seat: this.peopleNum
					}
				}
				util.request(
					api.RoomUrlByName, params,
					'GET'
				).then((res) => {
					console.log(res);
					this.roomListAll = res.rows;
				})
			},
			openRoomPicker() {
				this.$refs.roomPicker.open();
			},
			openDatePicker() {
				this.$refs.datePicker.open();
			},
			openBeginTimePicker() {
				this.$refs.beginTimePicker.open();
			},
			openEndTimePicker() {
				this.$refs.endTimePicker.open();
			},
			//点击预约按钮
			goToReview(id) {
				console.log(id);
				const parameter = {
					id: id,
					date: this.selectedDateStr,
					dateTemp: this.selectedDate,
					type: 1
				}
				console.log(parameter);
				uni.navigateTo({
					url: '/pages/app/metting/detailMeeting?id=' + parameter.id + '&date=' + parameter.date +
						'&dateTemp=' + parameter.dateTemp + '&type=' + parameter.type,
				});
			},
			//选择会议室地点
			roomNameconfirm(e) {
				console.log(e);
				this.selectedMeetingName = e.value[0].value;
				// this.selectedMeetingId = e.value[0].id;
			},
			//选择会议预约日期
			confirmSelectedDate(e) {
				console.log(e);
				this.selectedDateStr = this.timestampToDateStr(e.value)
			},
			//选择会议开始时间
			confirmSelectedBeginTime(e) {
				console.log(e);
				this.selectedBeginTimeStr = e.value;

			},
			//选择会议结束时间
			confirmSelectedEndTime(e) {
				console.log(e);
				this.selectedEndTimeStr = e.value;
			},
			//获取会议室信息
			async queryRoomList() {
				await util.request(
					api.RoomUrl, {},
					'GET'
				).then((data) => {
					console.log(data);
					this.roomListAll = data.rows;
					// this.roomList.push(data.rows)
				})
			},
			//重置方法
			resetButtonFun() {
				this.selectedBeginTime = '';
				this.selectedBeginTimeStr = '';
				this.selectedDate = Number(new Date());
				this.selectedDateStr = this.timestampToDateStr(Date.now());
				this.selectedEndTime = '';
				this.selectedEndTimeStr = '';
				this.selectedMeetingId = '';
				this.selectedMeetingName = '';
				this.peopleNum = '';
			},
			timestampToDateStr(timestamp) {
				console.log(timestamp);
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			timestampToTimeStr(timestamp) {
				const date = new Date(timestamp);
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				return `${hours}:${minutes}`;
			}


		}
	}
</script>

<style scoped>
	.main-body {

		background-image: url("../../../static/images/review.png");
		background-position: center top -100rpx;
		background-size: 100% 110%;
		background-color: #75a1ec;

	}

	.search-box {
		height: 400rpx;
		background-color: white;
		margin-left: 5%;
		width: 90%;
		border-radius: 26rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
	}

	.search-body {
		/* margin-top: 10rpx; */
		margin-left: 4%;
		width: 92%;
		min-height: 240rpx;
		background-color: white;
	}

	.roomBox {
		height: 750rpx;
		overflow-y: auto;
	}

	.roomBody {
		position: relative;
		min-height: 290rpx;
		background-color: white;
		width: 90%;
		margin-left: 5%;
		border-radius: 26rpx;
		margin-bottom: 20rpx;
	}

	.time-line {
		display: flex;
		height: 20rpx;
		/* background-color: #75a1ec; */
		width: 90%;
		margin-left: 5%;
		border-radius: 26rpx;
		margin-top: 20rpx;
		/* border: 1rpx solid #d8eafd; */
	}

	.time-line-item {
		background-color: #ffe3b8;
		display: flex;
		width: 6.25%;
		height: inherit;

	}

	.time-line-str-item {
		/* display: flex; */
		width: 13%;
		height: inherit;
		font-size: 20rpx;
		color: #667685;
		text-align: center;
	}

	.first-item {
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
	}

	.last-item {
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.isChecked {
		background-color: #ffa622;
	}
</style>